<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多窗口视频播放器</title>
    <style>
        :root {
            --main-bg-color: #2b2b2b;
            --video-bg-color: #1e1e1e;
            --button-bg-color: #3a3a3a;
            --button-hover-color: #4a4a4a;
            --button-active-color: #555555;
            --highlight-color: #0078d4;
            --volume-color: #22a540;
        }

        body {
            margin: 0;
            padding: 0;
            background-color: var(--main-bg-color);
            color: white;
            font-family: Arial, sans-serif;
        }

        #app {
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        #video-container {
            flex: 1;
            overflow-y: auto;
            padding: 10px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }

        .video-wrapper {
            background-color: var(--video-bg-color);
            border-radius: 8px;
            padding: 5px;
            display: flex;
            flex-direction: column;
        }

        .video-title {
            font-size: 12px;
            text-align: center;
            margin: 5px 0;
        }

        .video-player {
            width: 100%;
            aspect-ratio: 16/9;
            background: black;
            border-radius: 5px;
        }

        .controls {
            margin-top: 5px;
        }

        .progress-container {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-bottom: 5px;
        }

        .time {
            font-size: 10px;
            min-width: 40px;
        }

        .progress {
            flex: 1;
            height: 3px;
            background: #4a4a4a;
            position: relative;
            cursor: pointer;
            border-radius: 1.5px;
        }

        .progress-bar {
            height: 100%;
            background: var(--highlight-color);
            border-radius: 1.5px;
            width: 0;
        }

        .buttons-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .playback-controls {
            display: flex;
            gap: 15px;
        }

        .volume-controls {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        button {
            background-color: var(--button-bg-color);
            border: none;
            border-radius: 5px;
            width: 24px;
            height: 24px;
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }

        button:hover {
            background-color: var(--button-hover-color);
        }

        button:active {
            background-color: var(--button-active-color);
        }

        .volume-slider {
            width: 60px;
            height: 3px;
            -webkit-appearance: none;
            background: #4a4a4a;
            border-radius: 1.5px;
        }

        .volume-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 8px;
            height: 8px;
            background: white;
            border-radius: 50%;
            cursor: pointer;
        }

        #bottom-controls {
            background-color: var(--video-bg-color);
            border-top: 1px solid #404040;
            padding: 10px;
            display: flex;
            gap: 10px;
        }

        #bottom-controls button {
            padding: 8px 15px;
            width: auto;
            height: auto;
            min-width: 100px;
            font-size: 14px;
        }

        /* 滚动条样式 */
        ::-webkit-scrollbar {
            width: 10px;
        }

        ::-webkit-scrollbar-track {
            background: var(--main-bg-color);
        }

        ::-webkit-scrollbar-thumb {
            background: #404040;
            border-radius: 5px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #505050;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="video-container"></div>
        <div id="bottom-controls">
            <button id="select-folder">选择文件夹</button>
            <button id="play-all">全部播放</button>
            <button id="stop-all">全部停止</button>
            <input type="file" id="folder-input" webkitdirectory directory multiple style="display: none;">
        </div>
    </div>

    <script>
        class VideoPlayer {
            constructor(file) {
                this.file = file;
                this.wrapper = document.createElement('div');
                this.wrapper.className = 'video-wrapper';
                this.createElements();
                this.setupEventListeners();
            }

            createElements() {
                // 创建视频标题
                const title = document.createElement('div');
                title.className = 'video-title';
                title.textContent = this.file.name;

                // 创建视频元素
                this.video = document.createElement('video');
                this.video.className = 'video-player';
                this.video.src = URL.createObjectURL(this.file);

                // 创建控制界面
                const controls = document.createElement('div');
                controls.className = 'controls';

                // 进度条容器
                const progressContainer = document.createElement('div');
                progressContainer.className = 'progress-container';

                this.currentTime = document.createElement('div');
                this.currentTime.className = 'time';
                this.currentTime.textContent = '00:00';

                this.progress = document.createElement('div');
                this.progress.className = 'progress';
                this.progressBar = document.createElement('div');
                this.progressBar.className = 'progress-bar';
                this.progress.appendChild(this.progressBar);

                this.duration = document.createElement('div');
                this.duration.className = 'time';
                this.duration.textContent = '00:00';

                progressContainer.appendChild(this.currentTime);
                progressContainer.appendChild(this.progress);
                progressContainer.appendChild(this.duration);

                // 按钮容器
                const buttonsContainer = document.createElement('div');
                buttonsContainer.className = 'buttons-container';

                // 播放控制按钮组
                const playbackControls = document.createElement('div');
                playbackControls.className = 'playback-controls';

                this.rewindBtn = document.createElement('button');
                this.rewindBtn.innerHTML = '⏪';
                this.playBtn = document.createElement('button');
                this.playBtn.innerHTML = '▶';
                this.forwardBtn = document.createElement('button');
                this.forwardBtn.innerHTML = '⏩';
                this.fullscreenBtn = document.createElement('button');
                this.fullscreenBtn.innerHTML = '⛶';

                playbackControls.appendChild(this.rewindBtn);
                playbackControls.appendChild(this.playBtn);
                playbackControls.appendChild(this.forwardBtn);
                playbackControls.appendChild(this.fullscreenBtn);

                // 音量控制
                const volumeControls = document.createElement('div');
                volumeControls.className = 'volume-controls';

                this.muteBtn = document.createElement('button');
                this.muteBtn.innerHTML = '🔊';
                
                this.volumeSlider = document.createElement('input');
                this.volumeSlider.type = 'range';
                this.volumeSlider.className = 'volume-slider';
                this.volumeSlider.min = '0';
                this.volumeSlider.max = '100';
                this.volumeSlider.value = '100';

                volumeControls.appendChild(this.muteBtn);
                volumeControls.appendChild(this.volumeSlider);

                buttonsContainer.appendChild(playbackControls);
                buttonsContainer.appendChild(volumeControls);

                controls.appendChild(progressContainer);
                controls.appendChild(buttonsContainer);

                // 组装所有元素
                this.wrapper.appendChild(title);
                this.wrapper.appendChild(this.video);
                this.wrapper.appendChild(controls);
            }

            setupEventListeners() {
                // 播放/暂停
                this.playBtn.onclick = () => {
                    if (this.video.paused) {
                        this.video.play();
                        this.playBtn.innerHTML = '⏸';
                    } else {
                        this.video.pause();
                        this.playBtn.innerHTML = '▶';
                    }
                };

                // 快进快退
                this.rewindBtn.onclick = () => this.seek(-15);
                this.forwardBtn.onclick = () => this.seek(30);

                // 全屏
                this.fullscreenBtn.onclick = () => {
                    if (!document.fullscreenElement) {
                        this.wrapper.requestFullscreen();
                    } else {
                        document.exitFullscreen();
                    }
                };

                // 音量控制
                this.muteBtn.onclick = () => {
                    this.video.muted = !this.video.muted;
                    this.muteBtn.innerHTML = this.video.muted ? '🔈' : '🔊';
                };

                this.volumeSlider.oninput = (e) => {
                    this.video.volume = e.target.value / 100;
                    this.video.muted = false;
                    this.muteBtn.innerHTML = '🔊';
                };

                // 进度条
                this.progress.onclick = (e) => {
                    const rect = this.progress.getBoundingClientRect();
                    const pos = (e.clientX - rect.left) / rect.width;
                    this.video.currentTime = pos * this.video.duration;
                };

                // 更新时间和进度条
                this.video.ontimeupdate = () => {
                    const current = Math.floor(this.video.currentTime);
                    const duration = Math.floor(this.video.duration);
                    this.currentTime.textContent = this.formatTime(current);
                    this.duration.textContent = this.formatTime(duration);
                    this.progressBar.style.width = `${(current / duration) * 100}%`;
                };

                // 视频加载完成后自动跳转到三分之一处
                this.video.onloadedmetadata = () => {
                    this.video.currentTime = this.video.duration / 3;
                };
            }

            seek(seconds) {
                this.video.currentTime = Math.max(0, Math.min(this.video.duration, this.video.currentTime + seconds));
            }

            formatTime(seconds) {
                const minutes = Math.floor(seconds / 60);
                seconds = Math.floor(seconds % 60);
                return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
            }

            play() {
                this.video.play();
                this.playBtn.innerHTML = '⏸';
            }

            stop() {
                this.video.pause();
                this.video.currentTime = 0;
                this.playBtn.innerHTML = '▶';
            }
        }

        class App {
            constructor() {
                this.videoPlayers = [];
                this.container = document.getElementById('video-container');
                this.setupControls();
            }

            setupControls() {
                const selectFolder = document.getElementById('select-folder');
                const folderInput = document.getElementById('folder-input');
                const playAll = document.getElementById('play-all');
                const stopAll = document.getElementById('stop-all');

                selectFolder.onclick = () => folderInput.click();
                folderInput.onchange = (e) => this.handleFiles(e.target.files);
                playAll.onclick = () => this.videoPlayers.forEach(player => player.play());
                stopAll.onclick = () => this.videoPlayers.forEach(player => player.stop());
            }

            handleFiles(files) {
                // 清除现有视频
                this.container.innerHTML = '';
                this.videoPlayers = [];

                // 筛选视频文件
                const videoFiles = Array.from(files).filter(file => 
                    file.type.startsWith('video/') || 
                    ['.mp4', '.avi', '.mkv', '.mov'].some(ext => file.name.toLowerCase().endsWith(ext))
                );

                // 创建新的视频播放器
                videoFiles.forEach(file => {
                    const player = new VideoPlayer(file);
                    this.videoPlayers.push(player);
                    this.container.appendChild(player.wrapper);
                });
            }
        }

        // 初始化应用
        new App();
    </script>
</body>
</html> 